<template>
    <div class="wh-100">
        <!--头部-->
        <head-components :title="title"></head-components>
        <!--内容-->
        <div style="width: 600px">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="180">
                <FormItem prop="materialUpload">
                    <div class="d-flex-center debugger-bor" style="flex-direction: column">
                        <div style="width: 100px; height: 100px; border: 1px solid red; border-radius: 50%"></div>
                        <Button type="primary" style="position: relative">修改</Button>
                    </div>
                </FormItem>
                <FormItem label="单位名称" prop="companyName">
                    <Input v-model="formValidate.companyName" placeholder="请输入单位名称"></Input>
                </FormItem>
                <FormItem label="统一社会信用代码" prop="unifyTheSocialCreditCode">
                    <Input v-model="formValidate.unifyTheSocialCreditCode" placeholder="请输入统一社会信用代码"></Input>
                </FormItem>
                <FormItem label="单位所属行业" prop="industryOfTheUnit">
                    <Select v-model="formValidate.industryOfTheUnit" placeholder="请选择单位所属行业">
                        <Option value="beijing">行业1</Option>
                        <Option value="shanghai">行业2</Option>
                        <Option value="shenzhen">行业3z</Option>
                    </Select>
                </FormItem>
                <FormItem label="网签所属行业" prop="industryOfTheNetworkTag">
                    <Select v-model="formValidate.industryOfTheNetworkTag" placeholder="请选择单位网签所属行业">
                        <Option value="beijing">行业1</Option>
                        <Option value="shanghai">行业2</Option>
                        <Option value="shenzhen">行业3z</Option>
                    </Select>
                </FormItem>
                <FormItem label="业务涉及领域" prop="businessScope">
                    <Select v-model="formValidate.businessScope" placeholder="请选择单位业务涉及的领域">
                        <Option value="beijing">行业1</Option>
                        <Option value="shanghai">行业2</Option>
                        <Option value="shenzhen">行业3z</Option>
                    </Select>
                </FormItem>
                <FormItem label="单位类型" prop="flatType">
                    <Select v-model="formValidate.flatType" placeholder="请选择单位类型">
                        <Option value="beijing">行业1</Option>
                        <Option value="shanghai">行业2</Option>
                        <Option value="shenzhen">行业3z</Option>
                    </Select>
                </FormItem>
                <FormItem label="单位性质" prop="unitProperty">
                    <Select v-model="formValidate.unitProperty" placeholder="请选择单位性质">
                        <Option value="beijing">行业1</Option>
                        <Option value="shanghai">行业2</Option>
                        <Option value="shenzhen">行业3z</Option>
                    </Select>
                </FormItem>
                <FormItem label="员工数量" prop="numberOfStaff">
                    <Input v-model="formValidate.numberOfStaff" placeholder="请输入内容"></Input>
                </FormItem>
                <FormItem label="单位所在地区" prop="unitLocation">
                    <Select v-model="formValidate.unitLocation" placeholder="Select your city">
                        <Option value="beijing">行业1</Option>
                        <Option value="shanghai">行业2</Option>
                        <Option value="shenzhen">行业3z</Option>
                    </Select>
                </FormItem>
                <FormItem label="详细地址" prop="detailedAddress">
                    <Input v-model="formValidate.detailedAddress" placeholder="请填写单位详细地址"></Input>
                </FormItem>
                <FormItem label="公司官网" prop="companySOfficialWebsite">
                    <Input v-model="formValidate.companySOfficialWebsite" placeholder="请输入公司官方网址"></Input>
                </FormItem>
                <FormItem label="上传证明材料" prop="materialUpload">
                    <span>{{ tip1 }}</span>
                    <uploadPicture :max-count="1"></uploadPicture>
                    <span>{{ tip2 }}</span>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">修改并保存</Button>
                </FormItem>
            </Form>
        </div>
    </div>
</template>
<script>
import uploadPicture from '../../../components/uploadPicture/uploadPicture.vue';
import HeadComponents from './my-components/headComponents.vue';
import imageUploadComponent from './my-components/imageUploadComponent.vue';
export default {
    components: { HeadComponents, imageUploadComponent, uploadPicture },
    data() {
        return {
            tip1: '加盖企业公章的营业执照或统一社会信用代码证书，请使用ipg、ipeg、png格式的图片。',
            tip2: '请按要求上传以上证件，河南省大中专毕业生24365就业平台将参照您的材料为您进行审核，并在审核后后短信通知您。',
            title: '企业信息',
            formValidate: {
                companyName: '',
                unifyTheSocialCreditCode: '',
                industryOfTheUnit: '',
                industryOfTheNetworkTag: '',
                businessScope: '',
                flatType: '',
                unitProperty: '',
                numberOfStaff: '',
                unitLocation: '',
                detailedAddress: '',
                companySOfficialWebsite: '',
                materialUpload: ''
            },
            ruleValidate: {
                companyName: [{ required: true, message: '* 单位名称不能为空', trigger: 'blur' }],
                unifyTheSocialCreditCode: [{ required: true, message: '* 统一社会信用代码不能为空', trigger: 'blur' }],
                industryOfTheUnit: [{ required: true, message: '* 单位所属行业不能为空', trigger: 'change' }],
                industryOfTheNetworkTag: [{ required: true, message: '* 单位网签所属行业不能为空', trigger: 'change' }],
                businessScope: [{ required: true, message: '* 业务涉及领域不能为空', trigger: 'change' }],
                flatType: [{ required: true, message: '* 单位类型不能为空', trigger: 'change' }],
                unitProperty: [{ required: true, message: '* 单位性质不能为空', trigger: 'change' }],
                numberOfStaff: [{ required: true, message: '* 员工数量不能为空', trigger: 'blur' }],
                unitLocation: [{ required: true, message: '* 单位所在地区不能为空', trigger: 'change' }],
                detailedAddress: [{ required: true, message: '* 详细地址不能为空', trigger: 'blur' }],
                materialUpload: [{ required: true, message: '* 请上传证明材料', trigger: 'blur' }]
            }
        };
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    this.$Message.success('Success!');
                } else {
                    this.$Message.error('Fail!');
                }
            });
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        }
    }
};
</script>
